<template>
	<!-- 工单详情 -->
	<view class="wrap"> 
		<view style="background: #ffffff;">
			<view class="detail-header">
				<icon-text icon-path="order" :icon-position="0" icon-text="报修信息" :icon-size="45"></icon-text>
				<u-button size="mini" :custom-style="customButton">紧急</u-button>
			</view>
			<u-line></u-line>
			<view class="detail-content">
				<view class="item-column">
					<text class="column-name">单号:</text>
					<text class="column-value">{{ sheetDetail.orderNo }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">设备:</text>
					<text class="column-value">{{ sheetDetail.devName }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">mac:</text>
					<text class="column-value">{{ sheetDetail.devMac }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">车辆编号:</text>
					<text class="column-value">{{ sheetDetail.busNo }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">故障设备:</text>
					<text class="column-value">{{ sheetDetail.faultDev }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">故障原因:</text>
					<text class="column-value">{{ sheetDetail.faultReason }}</text>
				</view>
				<view class="item-column" v-if="sheetDetail.icons">
					<text class="column-name" style="width: 100rpx;">照片:</text>
					<view class="column-image">
						<u-grid :col="3" @click="click" hover-class="hover-class" :border="false">
							<u-grid-item v-for="(item, index) in sheetDetail.icons" :index="index" :key="index" :custom-style="customGridItem">
								<u-image width="160rpx" height="160rpx" :src="item"></u-image>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<view class="item-column">
					<text class="column-name">巡检人:</text>
					<text class="column-value">{{ sheetDetail.inspectionMan }}</text>
				</view>
				<view class="item-column">
					<text class="column-name">受理人:</text>
					<text class="column-value">{{ sheetDetail.acceptor }}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import iconText from '@/components/icon-text.vue'
	export default{
		components:{
			iconText
		},
		data(){
				return{
					customButton:{
						color:'#ffffff',
						background:'#fb5151'
					},
					customGridItem:{
						padding:'10rpx'
					},
					sheetDetail:{
						orderNo:21060913,
						devName:'设备A',
						devMac:'',
						busNo:122233,
						faultDev:'屏幕B',
						faultReason:"烧屏",
						icons:[
							'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F7bce4e0b-a72c-46d0-b4d4-70c61a6299e9.jpg',
							'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F4380cc42-5c3f-4639-a663-802d6ee97b86.jpg',
							'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F48c9f8f1-f3a7-4c9c-840a-3873e4669f13.png',
							'https://szsszhlsit1.obs.cn-north-4.myhuaweicloud.com:443/dr-prd%2Fconsole%2Ffile%2F28122585-8c22-4abd-9fae-9edd8f216703.png'
						],
						inspectionMan:'李四',
						acceptor:'王五'
					}
				}
		},
		props:{
			sheetOrder:{
				type:Number,
				default:0
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		width: 100%;
		height: 1600rpx;
		background: #f5f5f5;
		padding: 30rpx;
	}
	.detail-header{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}
	.detail-content{
	}
	.item-column{
		display: flex;
		flex-direction: row;
		margin: 30rpx 30rpx;
		.column-name{
			color: #333333;
			font-size: 32rpx;
		}
		.column-value{
			margin-left: 16rpx;
			color: #666666;
			font-size: 32rpx;
		}
	}
</style>
